<!--  -->
<template>
  <div class="regist">
    <div class="loginTitle">
      <span></span>
      <h3>欢迎进入电商APP</h3>
      <span></span>
    </div>
    <p class="telphone">手机号</p>
    <li class="phoneInput">
      <span>+<b>86</b></span> <input type="text" placeholder="请输入手机号" />
    </li>
    <p class="telphone">验证码</p>
    <li class="authcode">
      <span><b>请输入验证码</b></span>
      <input type="text" class="passwordCode" /><button>获取验证码</button>
    </li>
    <!-- <van-field
  v-model="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <van-button size="small" type="primary">发送验证码</van-button>
  </template>
</van-field> -->

    <li>
      <p class="logins">注册</p>
    </li>
    <li class="passwordSikze">
      <p class="forgetPassword">忘记密码</p>
    </li>
    <li class="lineLogin">
      <span class="line"></span><b>第三方登录</b><span class="line"></span>
    </li>
    <div class="icons">
      <dl>
        <dt>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-QQ"></use>
          </svg>
        </dt>
        <dd>QQ</dd>
      </dl>
      <dl>
        <dt>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weixin"></use>
          </svg>
        </dt>
        <dd>微信</dd>
      </dl>
      <dl>
        <dt>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weibo"></use>
          </svg>
        </dt>
        <dd>微博</dd>
      </dl>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field } from "vant";
Vue.use(Field);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      sms: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.regist {
  width: 100%;
  height: 100%;
  .loginTitle {
    width: 100%;
    height: 104px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .telphone,
  .password {
    width: 100%;
    height: 18px;
    font-size: 7px;
    font-weight: bold;
    margin-top: 30px;
    margin-left: 35px;
  }
  .phoneInput,
  .passwordSikze {
    width: 100%;
    height: 20px;
    text-align: center;
    span {
      font-size: 10px;
      font-weight: bold;
    }
    input {
      width: 80%;
      height: 14px;
      font-size: 6px;
      border: 0;
      outline: none;
      border-bottom: 1px solid #898989;
    }
  }
  .logins {
    width: 80%;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    font-size: 8px;
    font-weight: bold;
    color: #ffff;
    background: #9ebaea;
    margin-top: 3rem;
    margin-bottom: 1.6rem;
    margin-left: 2rem;
  }
  .forgetPassword {
    line-height: 36px;
    font-size: 10px;
    font-weight: bold;
    color: #898989;
    margin-right: 75%;
  }
  .lineLogin {
    margin-top: 2rem;
    margin-bottom: 2rem;
    b {
      font-size: 10px;
      color: #898989;
      margin: 0 10px;
      font-weight: bold;
      display: inline-block;
    }
    line-height: 33px;
    text-align: center;

    .line {
      display: inline-block;
      width: 60px;
      height: 2px;
      background: #ccc;
      text-align: center;
      line-height: 12px;
    }
  }
}
.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icons {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 14px;
  margin-left: 30%;
  dl {
    margin: 0px 14px;
    dt {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 50%;
      background: #f5f5f5;
    }
  }
  dd {
    font-size: 8px;

    color: #c6c6c6;
  }
}
.authcode {
  width: 100%;
  height: 12px;
  margin-bottom: 20px;

  input {
    width: 72%;
    height: 14px;
    font-size: 6px;
    border: 0;
    outline: none;
    border-bottom: 1px solid #898989;
    position: relative;
  }
  span {
    font-size: 10px;
    font-weight: bold;
  }
}
button {
  background: #ccc;
  outline: none;
  border: 0;
  font-size: 8px;
  padding: 4px 6px;
  position: absolute;
  top: 13.4rem;
  right: 1.7rem;
}
</style>
